<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>千园千变，万班万课</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="assets/css/admin.css">
    <link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<div class="tpl-portlet-components">
    <div class="portlet-title">
        <ol class="am-breadcrumb">
            <li><a href="#" class="am-icon-home">首页</a></li>
            <li><a href="#">表单</a></li>
            <li class="am-active">Amaze UI 表单</li>
        </ol>
    </div>
    <div class="tpl-block ">
        <div class="am-g tpl-amazeui-form">
            <div class="am-u-sm-12">
                <form class="am-form am-form-horizontal">
                    <div class="am-form-group">
                        <label class="am-u-sm-2 am-form-label">账号</label>
                        <div class="am-u-sm-10 line">
                            <input type="tel" id="username" name="username"
                                   class="verification[required]" data-info="名称"
                                   style="width: 300px" placeholder="请输入账号（手机号）">
                            <span class="tips"> </span>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label class="am-u-sm-2 am-form-label">姓名</label>
                        <div class="am-u-sm-10 line">
                            <input type="text" id="name" style="width: 300px" name="name" placeholder="请输入老师姓名">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label class="am-u-sm-2 am-form-label">身份证正面</label>
                        <div class="am-u-sm-10 line">
                            <div class="img_content">
                                <input type="file" class="img_upload" id="front">
                                <i class="am-icon-file-image-o"></i>
                                <img src="" alt="">
                            </div>
                            <button class="am-btn am-btn-default  am-btn-xs preview_btn">
                                <i class="am-icon-eye"></i>
                                预览
                            </button>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label class="am-u-sm-2 am-form-label">身份证背面</label>
                        <div class="am-u-sm-10 line">
                            <div class="img_content">
                                <input type="file" class="img_upload" id="back">
                                <i class="am-icon-file-image-o"></i>
                                <img src="" alt="">
                            </div>
                            <button class="am-btn am-btn-default  am-btn-xs preview_btn">
                                <i class="am-icon-eye"></i>
                                预览
                            </button>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <div class="am-u-sm-9 am-u-sm-push-2">
                            <button type="button" class="am-btn am-btn-primary" id="submitBtn"
                                    data-am-loading="{spinner: 'circle-o-notch', loadingText: '提交中...', resetText: '提交成功'}">
                                确定
                            </button>
                            <button type="button" class="am-btn am-btn-default btn_back">返回</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/layer.js"></script>
<script src="assets/js/jquery.cookie.js"></script>
<script src="assets/js/md5.min.js"></script>
<script src="assets/js/verification.js"></script>
<script src="assets/js/request.js"></script>
<script src="assets/js/jquery.pagination.js"></script>
<script src="assets/js/jquery.serializejson.min.js"></script>
<script src="assets/js/jquery.params.js"></script>
<script src="assets/js/app.js"></script>
<script>
var id = $.query.get("id").toString() || "undefined";
function getInfo (id) {
  if (id !== 'undefined') {
    AjaxRequest({
      url: '/admin/admin_info/',
      data: {admin_id:id},
      succFun: function (res) {
        var data = res.data
        $("form").initForm(res.data);
        let cards=data.id_url.split(',')
        cards[0] && $('#front').attr('data-src',cards[0]).siblings('img').attr('src',cards[0]).siblings('i').hide()
        $('#front').parents('.img_content').siblings('.preview_btn').show()
        cards[1] && $('#back').attr('data-src',cards[1]).siblings('img').attr('src',cards[1]).siblings('i').hide()
        $('#back').parents('.img_content').siblings('.preview_btn').show()
      }
    })
  }
}
getInfo(id)
//图片上传
$('[type="file"]').on('change', function (e) {//当chooseImage的值改变时，执行此函数
  var file = this.files[0];
  var isImgUpload = $(this).hasClass('img_upload')
  var _this = this;
  var filePath = $(this).val(), //获取到input的value，里面是文件的路径
    fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
    src = window.URL.createObjectURL(this.files[0]);//转成可以在本地预览的格式
  //判断图片的文件大小
  const fileSizeLt4 = file.size / 1024 / 1024 > 4;
  if (fileSizeLt4) {
    layer.msg('图片大小不能大于4M', {icon: 2});
    return false;
  }
  // 检查是否是图片
  if (!fileFormat.match(/.png|.jpg|.jpeg/) && isImgUpload) {
    layer.msg('上传错误,文件格式必须为：png/jpg/jpeg', {icon: 2});
    return false;
  } else {
    var index = layer.load(2, {
      shade: [0.1, '#000'] //0.1透明度的白色背景
    });
    var formData = new FormData();
    formData.append('file', file); // 固定格式
    formData.append('flag', 1); // 固定格式
    $(_this).val('')
    AjaxRequest({
      url: '/admin/file_upload/',
      data: formData,
      contentType: false,
      processData: false,
      succFun: function (res) {
        if (isImgUpload) {
          $(_this).attr('data-src', res.data).siblings('img').attr('src', res.data).siblings('i').hide()
          $(_this).parents('.img_content').siblings('.preview_btn').show()
        } else {
          $(_this).parents('button').siblings('small').html(res.data)
        }
        layer.closeAll()
      }
    })
  }
});
// 图片预览
$('.preview_btn').click(function (e) {
  e.preventDefault()
  var imgUrl = $(this).siblings('.img_content').children().attr('data-src')
  layer.open({
    type: 1,
    title: false,
    closeBtn: 0,
    area: ['85%', '500px'],
    skin: 'layui-layer-nobg', //没有背景色
    shadeClose: true,
    content: '<div ><img src="' + imgUrl + '" style="width:100%"></div>'
  });
})
//提交表单
$('#submitBtn').click(function (e) {
  e.preventDefault()
  var $btn = $(this)
  if (Verification()) {
    $btn.button('loading');
    var formData = $('form').serializeJSON()
    formData.front = $('#front').attr('data-src')
    formData.back = $('#back').attr('data-src')
    console.log(formData.class)
    var url = '/agent/add_teacher/'
    if (id !== 'undefined') {
      formData.admin_id=id
      url = '/agent/edit_teacher/'
    }
    AjaxRequest({
      url,
      data: formData,
      succFun: function (res) {
        layer.msg(res.message, {icon: 1, time: 1000}, function () {
          window.location.href = 'teacher_list.html'
        })
      },
      complete: function () {
        $btn.button('reset');
      }
    })
  }
})
</script>
</body>
</html>